<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器(元素选择器和id选择器和class选择器)</title>
    <script src="./jquery1.11.3.js"></script>
    <style>
        /*#box1{*/
        /*    color: red;*/
        /*}*/
    </style>
    <script>
        $(function () {
            // $('#box1').css('color','blue');//id选择器
            // document.getElementById("box1").style.color="blue";

            //$('.post').css('color','yellow');//class选择器

            // document.getElementsByClassName("post")[0].style.color="yellow";//获得class为post的第一个元素的颜色
            // $('.post').eq(0).css('color','yellow');//获得class为post的第一个元素的颜色

            // $('.post').css('color','yellow');//修改class为post的所有元素的颜色

            // alert($('.post').length);//返回2 获得class为post元素的长度 共几个
            // alert($('.post').size());//返回2 获得class为post元素的长度 共几个
            // alert(document.getElementsByClassName("post").length);//返回2 获得class为post元素的长度 共几个

            // alert($('#div1>p').css('color',"red"));//为id为div1父元素的子元素设置css样式 颜色
            alert(document.querySelectorAll("#div1>p").length);//查询id为div1父元素的子元素的个数

        });
    </script>

</head>
<body>
<script>
    /*一.选择器是jquery最核心的部分，可以使用选择器去直接改变页面元素的样式
   *        选择器的种类
   *                1.元素名称选择器  返回一个或多个
   *                2.id选择器         返回一个
   *                3.class选择器          返回一个或多个
   * 二.用id选择器
   *   $('#box1').css('color','blue') jquery的基本语法
   *      1.$() 都在这个里面
   *      2.$(function(){
   *
   *         });所有的代码都写在里面
   *
   *     3.$('#box1')获得id为box1的div元素
   *     4..css()是$('#box1')的方法
   *     5.'color'属性名
   *     6.'blue' 属性值
   *三.通过类class选择器
   *   1.document.getElementsByClassName("post")[0].style.color="yellow";	通过class选择器选择一组只改变一个的方法  比如颜色	$('.post').eq(0).css('color','yellow');
   *   2.$('.post').css('color','yellow') //修改class为post的所有元素的颜色
   *   3.#div1>p 在css中大于号> 表示设置 id为div1的下面的子元素的样式 不包含子子孙孙元素
   *   4.#div1 p 在css中 不写大于号 表示设置id为div1的下面的子元素的样式 包含子子孙孙元素
   *
   */
</script>
<div class="post">jquery选择器1</div>
<div class="post">jquery选择器2</div>
<div id="box1">jquery选择器3</div>
<div id="box2">jquery选择器4</div>
<br />
<br />
<div id="div1">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <div id="div2">
        <p>2</p>
        <p>2</p>
        <p>2</p>
        <p>2</p>
    </div>
</div>
</body>
</html>